<template>
  <div>
    <h2>vuex的状态管理数据</h2>
    <h3>博客标题</h3>
    <i>{{this.$store.state.blogTitle}}</i>
    <h3>todos里面的信息</h3>
    <ul>
      <li v-for="item in todosALise" :key="item.id">
        <span>{{item.text}}</span>
        <span>{{item.done}}</span>
      </li>
    </ul>
    <h3>初始化访问量</h3>
    <p>
      mapState方式{{viewCount}}<br>
      直接使用views {{this.$store.state.views}}
    </p>
    <h2>blogNumber数字</h2>
    <span>state中blogNumber：{{this.$store.state.blogNumber}}</span>
    <h2>总计</h2>
    <span>state中total：{{this.$store.state.total}}</span>
    <el-button type="text" @click="totalAlise">点击增加total</el-button>
    <el-button type="text" @click="clickTest">console</el-button>
    <el-input v-model="firstName"></el-input>
    <h2>{{newName}}</h2>
    <el-input type="text" v-model="person.name"></el-input>
    <h2>Promise</h2>
    <el-button type="primary" @click="luckyDraw">点击抽奖</el-button>
  </div>
</template>

<script>

import { mapState, mapActions, mapGetters, mapMutations } from "vuex"

export default {
  name: "first",
  data() {
    return {
      checked: true,
      firstName: '',
      person: {
        id: 1,
        name: '沐'
      },
    }
  },
  watch: {
    // firstName(val) {
    //   this.newName = val
    // }
    firstName: {
      handler(val) {
        this.newName = val
      },
      immediate: true,
    },
    person: {
      handler(val) {
        this.newName = val.name
      },
      immediate: true,
      deep: true
    },
  },
  computed: {
    ...mapState({
      viewCount: 'views'
    }),
    ...mapGetters({
      todosALise: 'getToDo'
    }),
    // newName(val) {
    //   return this.firstName
    // }
  },
  created() {
    this.$store.dispatch('addViews')
  },
  mounted() { },
  methods: {
    ...mapMutations({
      totalAlise: 'clickTotal',
      clickTest: 'clickTest'
    }),
    ...mapActions({
      blogAdd: 'blogAdd'
    }),
    rand(a, b) {
      return Math.ceil(Math.random() * (b - a)) + a
    },
    luckyDraw() {
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          var v = this.rand(1, 100)
          if (v < 30) {
            resolve()
          } else {
            reject()
          }
        }, 1000);
      })
      p.then(() => {
        alert('中奖')
      }).catch(() => {
        alert('再接再厉')
      })
    },
  },
}
</script>

<style>
</style>
